<template>
  <div class="w">
    <div class="header">
      <div class="header_title">
        <i class="iconfont icon-fanhui" @click="back"></i>
        <span>外卖</span>
      </div>
    </div>
    <div class="info">
      <div class="search">
        <div class="info_search">
          <el-input class="search_left_input" @focus="search"></el-input>
          <el-button class="search_left_button">搜索</el-button>
        </div>
      </div>
      <div class="card">
        <div class="card_info" v-for="(item, index) in shopList" :key="index" @click="goShop(item)">
          <div class="card_info_left">
            <el-image style="width: 100%; height: 100%" :src="item.shopImage" fit="cover"></el-image>
          </div>
          <div class="card_info_right">
            <div class="right_title">
              <span>{{ item.shopName }}</span>
            </div>
            <div class="score">
              <div class="score_left">
                <span>{{ item.score }}分</span>
              </div>
              <div class="score_right">
                <span v-if="item.mode == 1">骑手专送</span>
                <span v-if="item.mode == 0">商家自配</span>
              </div>
            </div>
            <div class="right_sale">
              <span class="sale_text">月售{{ item.sales }}</span>
              <span class="line">|</span>
              <span class="sale_text">起送{{ item.start }}</span>
            </div>
            <div class="right_discounts">
              <el-tag size="mini">{{ item.discounts }}</el-tag>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      shopList: [],
      qurey: '',
      info: [],
    };
  },

  created() {
    this.info = JSON.parse(localStorage.getItem('userInfo'));
    this.getShopList();
  },

  methods: {
    back() {
      this.$router.push('/');
    },
    search() {
      this.$router.push('/search');
    },
    async getShopList() {
      const { data: res } = await this.$http.get('shop/getAllShopList', { params: this.qurey });
      if (res.code == 1) {
        this.shopList = res.data;
        return;
      } else {
        return this.$message.error('信息获取失败');
      }
    },
    async goShop(shopInfo) {
      this.$router.push({ path: '/shop', query: { shopId: shopInfo.id } });
      const { data: res } = await this.$http.put('shop/updateRate/' + shopInfo.id);
      if (res.code == 1) {
        return;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.w {
  height: 100vh;
  width: 100%;
  background-color: #fece4e;
  .header {
    height: 60px;
    .header_title {
      color: #080904;
      font-size: 25px;
      font-weight: bold;
      line-height: 60px;
      .icon-fanhui {
        font-size: 25px;
        margin-left: 10px;
        margin-right: 5px;
      }
    }
  }
  .info {
    background: linear-gradient(to top, #f4f4f4, 90%, #fefefe);
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;

    height: calc(100vh - 60px);
    .search {
      padding: 15px;
      .info_search {
        display: flex;
        align-items: center;
        border: 2px solid #fae284;
        border-radius: 50px;
        height: 35px;

        .search_left_input {
          :deep(.el-input__inner) {
            border-radius: 50px;
            border: none;
            height: 35px;
          }
        }
        .el-button,
        .el-button.is-round {
          padding: 7px 15px;
        }
        .search_left_button {
          border-radius: 50px;

          height: 35px;
          width: 80px;
          background-color: #f9dc50;
          font-size: 15px;
        }
      }
    }
    .card {
      overflow: auto;
      height: calc(100vh - 160px);
      scrollbar-width: none;
      -ms-overflow-style: none;
      padding: 15px;
      .card_info {
        display: flex;
        background-color: #fefefe;
        padding: 10px;
        border-radius: 15px;
        margin-bottom: 10px;
        .card_info_left {
          height: 100px;
          width: 100px;
          :deep(.el-image__inner) {
            border-radius: 15px;
          }
          margin-right: 10px;
        }
        .card_info_right {
          width: calc(100% - 115px);
          .right_title {
            font-weight: bold;
            font-size: 18px;
            color: #202424;
            letter-spacing: 2px;
            -webkit-line-clamp: 1;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .score {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: 5px;
            .score_left {
              color: #f7861a;
              font-size: 15px;
              font-weight: bold;
            }
            .score_right {
              border: 1px solid #ebe5d5;
              background-color: #fefffd;
              color: #ed8c3b;
              font-size: 5px;
              padding: 0px 4px;
              border-radius: 5px;
            }
          }
          .right_sale {
            margin-bottom: 8px;
            .sale_text {
              color: #a7a7a7;
              font-size: 10px;
            }
            .line {
              font-size: 10px;
              margin-left: 5px;
              margin-right: 5px;
              color: #a7a7a7;
            }
          }
          .right_discounts {
            .el-tag--mini {
              color: #e46a60;
              border: #f2dee1;
              background-color: #f9ffff;
              border: 1px solid #f2dfe0;
              border-radius: 7px;
            }
          }
        }
      }
    }
  }
}
</style>